/**
 * Created with IntelliJ IDEA.
 * User: zzl
 * Date: 12-12-2
 * To change this template use File | Settings | File Templates.
 */
(function ($) {

    var TimePicker = function (container, options) {
        this.$container = $(container);
        this.options = options;
        this.setup();
    };

    var proto = { constructor: TimePicker };
    TimePicker.prototype = proto;

    proto.setup = function () {
        var me = this;

        var html = me.buildHtml();
        me.$container.html(html);

        me.$hour = me.$container.find('.hour');
        me.$minute = me.$container.find('.minute');
        me.$second = me.$container.find('.second');
        me.$container.find('.up').repeatButton().on('click', function () {
            me.onUpClick();
        });
        me.$container.find('.down').repeatButton().on('click', function () {
            me.onDownClick();
        });

        me.$hour.val(0);
        me.$minute.val(0);
        me.$second.val(0);

        var hours = [];
        var n;
        for (n = 0; n < 24; n++) {
            hours.push(n);
        }
        var minutes = [];
        for (n = 0; n < 60; n += 5) {
            minutes.push(n);
        }
        var seconds = [];
        for (n = 0; n < 60; n += 10) {
            seconds.push(n);
        }
        me.$hour.on('focus',function (e) {
            me.showSelectGrid(this, hours);
        }).data('max', 23);
        me.$minute.on('focus',function (e) {
            me.showSelectGrid(this, minutes);
        }).data('max', 59);
        me.$second.on('focus',function (e) {
            me.showSelectGrid(this, seconds);
        }).data('max', 59);

        //
        if(me.options.precision == 'minute') {
            me.$second.attr('disabled', 'disabled').val('00');
        }
    };

    proto.showSelectGrid = function (input, items) {
        var me = this;
        $(input).select().selectGrid({
            upside: true,
            pos: {left: me.$container.offset().left - 6},
            offset: {left: 0, top: -5},
            colCount: 6,
            items: items,
            selectedCallback: function (value) {
                $(input).val(value).trigger('blur');
            }
        });
        me.lastFocusInput = input;
        domex.selectAllOnFocus(input);
    };

    proto.onUpClick = function () {
        var me = this;
        me.changeTimePart(1);
    };

    proto.onDownClick = function () {
        var me = this;
        me.changeTimePart(-1);
    };

    proto.changeTimePart = function (diff) {
        var me = this;
        var $input = $(me.lastFocusInput || me.$hour[0]);
        var max = $input.data('max');
        var value = parseInt($input.val()) + diff;
        if (value < 0) {
            value = 0;
        }
        else if (value > max) {
            value = max;
        }
        $input.val(value);
    };

    proto.buildHtml = function () {
        var html = '<table><tr>' +
            '<td><input type="text" class="hour" maxlength="2"></td>' +
            '<td>:</td>' +
            '<td><input type="text" class="minute" maxlength="2"></td>' +
            '<td>:</td>' +
            '<td><input type="text" class="second" maxlength="2"></td>' +
            '<td><table class="updown">' +
            '<tr><td height="10px"><input type="button" class="up"></td></tr>' +
            '<tr><td height="10px"><input type="button" class="down"></td></tr>' +
            '</table></td>' +
            '</tr></table>';

        return html;
    };

    proto.setValue = function(date) {
        var me = this;
        me.$hour.val(date.getHours());
        me.$minute.val(date.getMinutes());
        if(me.options.precision == 'second') {
            me.$second.val(date.getSeconds());
        }
    };

    proto.getValue = function() {
        var me = this;
        var date = new Date();
        date.setHours(me.$hour.val(), me.$minute.val(), me.$second.val());
        return date;
    };

    $.fn.timePicker = $.addPluginFn('timePicker', TimePicker, {
        precision: 'second'
    });

})(jQuery);